@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-gray-900 text-gray-100 font-genshin;
  background-image: url('/images/teyvat-bg.jpg');
  background-size: cover;
  background-attachment: fixed;
}

.genshin-card {
  @apply bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-lg p-6 shadow-lg border border-gray-700;
}

.genshin-btn {
  @apply px-4 py-2 rounded-lg font-bold transition-all duration-200;
}

.genshin-btn-primary {
  @apply bg-genshin-primary hover:bg-opacity-90 text-white;
}

.genshin-btn-accent {
  @apply bg-genshin-accent hover:bg-opacity-90 text-gray-900;
}

.genshin-text-input {
  @apply bg-gray-700 bg-opacity-50 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-genshin-accent;
}